<template>
  <div id="app" :style="cssVars">
    <!--缓存的页面-->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"> </router-view>
    </keep-alive>
    <!--不缓存的页面-->
    <router-view v-if="!$route.meta.keepAlive"> </router-view>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "app",
  mounted() {
    this.loadUserInfo();
    document
      .querySelector("body")
      .setAttribute("style", "background-color:black;");
  },
  computed: {  
    ...mapState([
      "bgColor",
      "reviewSearchBgColor",
      "color",
      "nav_bc",
      "main_bc_opacity",
      "main_bc_0_8",
      "main_color_0_1",
      "main_color_0_1_1",
      "main_bc_invert",
      "content_bc",
      "sub_color",
      "text_color",
      "dm_bc",
      "price_border",
      "main_bc_color",
      "item_bc",
      "menu_color",
      "unboxing_im_bc",
      "menu_d_bg",
      "menu_border",
      "pop_bg",
      "main_bc_color",
      "bc_svg",
      "battle_card_bc",
      "box_content_bc",
       "watch_btn_bc"
    ]),

    cssVars() {
      return {
        "--color": this.color,
        "--bg-color": this.bgColor,
        "--reviewSearchBgColor": this.reviewSearchBgColor,
        "--main-bc-color":this.main_bc_color,
        "--nav-bc": this.nav_bc,
        "--main-bc-opacity": this.main_bc_opacity,
        "--main-bc-0_8": this.main_bc_0_8,
        "--main-color-0_1": this.main_color_0_1,
        "--main-color-0_1_1": this.main_color_0_1_1,
        "--main-bc-invert": this.main_bc_invert,
        "--content-bc": this.content_bc,
        "--sub-color": this.sub_color,
        "--text-color": this.text_color,
        "--dm-bc": this.dm_bc,
        "--price-border": this.price_border,
        "--item-bc":this.item_bc,
        "--menu-color":this.menu_color,
        "--unboxing-im-bc":this.unboxing_im_bc,
        "--menu-d-bg":this.menu_d_bg,
        "--menu-border":this.menu_border,
        "--pop-bg":this.pop_bg,
        "--bc-svg":this.bc_svg,
        "--battle-card-bc":this.battle_card_bc,
         "--box-content-bc":this.box_content_bc,
          "--watch-btn-bc":this.watch_btn_bc,
      };
    },
  },
  methods: {
    loadUserInfo() {
      try {
        // 读取用户信息
        let infoStr = localStorage.getItem("userInfo");
        if (infoStr) {
          let info = JSON.parse(infoStr);
          this.$store.commit("setUserInfo", info);
        }
      } catch (e) {}
    },
  },
};
</script>


<style scoped lang="less">
#app {
  max-width: 448px;
  margin: 0 auto;
   background: var(--main-bc-color);
  height: 100vh;
}
</style>
<style lang="scss">
.van-dialog {
    background: var(--content-bc);
    color: var(--text-color);
    .content {
      text-align: center;
      /* width: 131px; */
      margin: o auto;
      margin: 0 auto;
    }
  }
  .van-dialog__confirm,
  .van-dialog__confirm:active {
    background: var(--content-bc);
    color: var(--text-color);
  }
</style>